<template>


<div class="login">
	<a class="el-icon-arrow-left" href="javascript:history.go(-1);" style="color: #FFFFFF;">防守打法</a>
			<div class="login_div">
				<li class="login_div_li1">
					<div class="login_div_li1_div">
						<!-- 存放logo的地方 -->
					</div>
					<li class="login_div_li1_font" >
						智慧小巷
					</li>
				</li>
				
         <el-form
      :model="loginForm"
      ref="loginForm"
      class="demo-loginForm"
    >
        <li class="login_div_li2" props="username" >
			
					<van-icon name="contact"   color="#fff"/>
			<div class="title">账号</div>
					<van-field v-model="loginForm.username"    placeholder="请输入账号"/>
				</li>
				<li class="login_div_li2" props="password" >

					<van-icon class="el-icon-lock" color="#fff"/>
						<div class="title">密码</div>
					<van-field v-model="loginForm.password"  show-password  placeholder="请输入密码" color="#fff"  type="password"/>
				</li>
     
        <li class="login_div_li2" >
					<van-icon class="el-icon-lock" color="#fff"/>
				<div class="title">验证</div>
					<van-field   v-model="loginForm.code"   style="width: 50%;float: left"  placeholder="请输入验证码" color="#fff"  type="text"/>

           <el-image
          :src="captchaImg"
          class="captchaImg"
          @click="getCaptcha"
        ></el-image>
				</li>

    		<li class="login_div_li3">
					<router-link to="/forgetPassword" class="login_div_li3_a" style="color: #FFFFFF;">
						忘记密码？
					</router-link>
				</li>
    

         

				<li class="login_div_li4">
					<div class="login_mydiv" style=" border:transparent 1px solid;">
						<div  class="login_a" style=" color: #FFFFFF;width: 100%;display: block; background:#07c160;" @click="submitForm('loginForm')">登录</div>
					</div>
					<div class="login_mydiv">
						<router-link to="/register" class="res_a" style="color: #FFFFFF;width: 100%;display: block;">
							注册
						</router-link>
						
						</div>
				</li>

      </el-form>
      		<router-link to="/" class="goback" >
							返回
						</router-link>
			</div>
		
		</div>



  
</template>

<script>
 
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        code: "",
        token: "",
      },
      captchaImg: null,
    };
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    // 表单预校验
    checkFrom() {
      // 判空
      if (
        this.loginForm.username == "" ||
        this.loginForm.password == "" ||
        this.loginForm.code == ""
      ) {
        this.$notify("信息不能为空");
        return false;
        // 验证码为5位字符
      } else if (this.loginForm.code.length != 5) {
        this.$notify("验证码为5为字符");
        return false;
      } else {
        return true;
      }
    },
    submitForm(formName) {
      if (this.checkFrom()) {
        this.$axios
          .post("/login?" + this.qs.stringify(this.loginForm))
          .then((res) => {
            if (res.data.code == 200) {
              const jwt = res.headers["authorization"];
              this.$store.commit("SET_TOKEN", jwt);
              //获取当前登录用户的信息
              this.getUserInfo();
            }
          });
      } else {
        console.log("error submit!!");
        return false;
      }
    },
    // 获取当前登录用户信息
    getUserInfo() {
      this.$axios.get("/sys/userInfo").then((res) => {
        this.$store.commit("SET_USER", res.data.data);

        if (res.data.code == 200) {
             let RouterPath  = this.$store.getters.getRouterPath
          console.log(RouterPath);
          
          if(RouterPath == "/register" || RouterPath=="/login" || RouterPath =="/forgetPassword" ){
                 this.$router.replace("/")
          }else{
            this.$router.go(-1);
          }
        }
      });
    },
    /**
     * 获取验证码
     */
    getCaptcha() {
      this.$axios.get("/captcha").then((res) => {
        console.log("/captcha");

        this.loginForm.token = res.data.data.token;
        this.captchaImg = res.data.data.captchaImg;
        this.loginForm.code = "";
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 注册账号
    registerAccount() {
      this.$router.push("/register");
    },
  },
};
</script>

<style scoped >
.goback{
  font-size: 16px;
  color: #ffffff;
  font-weight: block;
  margin-left:10%;
}
.van-icon {
  font-size: 24px !important;
}
.el-image {
  width: 09375rem;
  height: 35px;
}

.captchaImg {
  width: 3.5rem;

  float: left;
  border-radius: 4px;
  margin-right: 3px;
}
.title {
  width: 20%;
  margin-left: 6px;
  font-size: 16px;
}
.login {
  color: #ffffff;
}
.login {
  height: 100vh;
  /* background: url(../assets/logo.jpg); */
  /* filter: blur(25px) */
  position: relative;
}
.login:after {
  display: block;
  height: 100%;
  width: 100%;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: url(../assets/zhihui.png);
  background-size: 100% 100%;
  /* background-color: rgba(57,169,237,0.2); */
  filter: blur(30px);
  z-index: 2;
}
.login_div {
  height: 70%;
  width: 100%;
  position: fixed;
  top: 10%;
  z-index: 999;
}
.login_div_li1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 存logo的div */
.login_div_li1_div {
  height: 75px;
  width: 75px;
  background: url(../assets/zhihui.png);
  background-size: 100% 100%;
  border-radius: 50%;
}
.login_div_li1_font {
  font-size: 22px;
  color: #ffffff;
  z-index: 888;
  font-family: "KaiTi";
}
/* 输入账号 */
.login_div_li2 {
  margin: 10px auto;
  width: 80%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: #ffffff solid 1px;
  box-sizing: border-box;
  padding-left: 10px;
  border-radius: 5px;
}
.login_div_li2 > * {
  background-color: transparent;
  color: #ffffff;
}

.van-field__control,
.van-field__control {
  color: white;
}
.login_div_li3 {
  width: 80%;
  margin: auto;
}
.login_div_li3_a {
  display: block;
  width: 100%;
  font-size: 14px;
  color: #ffffff;
  text-align: right;
}

/* 登录注册 */
.login_div_li4 {
  display: flex;
  flex-direction: row;
  width: 80%;
  height: 50px;
  margin: 10px auto;
  align-items: center;
  justify-content: space-between;
}
.login_a,
.res_a {
  width: 40%;
  display: block;
  font-size: 15px;
}

.login_mydiv {
  width: 40%;
  border: #ffffff solid 1px;
  height: 80%;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
</style>
